<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 
收集表单数据
若：<input type='text'/>，则v-model收集的是value值，用户输入的就是value值
若：<input type='radio'/>,则v-model收集的是value值，且要给标签配置value值
若:<input type='checkbox'/>
只有一个checkout 不用去配置value值 v-model收集的是布尔值
有多个checkout 要去配置value值 v-model收集的是一个数组 记住要用数组去接收它

trim去掉首尾的空格 一般用于账号
number数字 一般根type='number'配合使用 这样收集到的就不是文本而是数字了
lazy 如果要写很多东西的时候 一般用这个 只有失去焦点的时候 才更新数据

 -->

<body>
    <div id="root">
        <form @submit.prevent="demo"><!-- action axaj将数据发送到后台跳转   表单提交的响应函数  阻止跳转行为-->
            <!-- <label for="demo">账号：</label> --> <!-- 这样就可以点击账号也获取焦点了 -->
            <!-- <input type="text" id="demo"><br></br> -->
            账号：<input type="text" v-model.trim="userinfo.account"><br> <!-- v-model一般是接收value值 -->
            密码：<input type="password" v-model="userinfo.password"><br></br>
            性别：男<input type="radio" name="sex" v-model="userinfo.sex" value="male">
            女<input type="radio" name="sex" v-model="userinfo.sex" value="female"><br></br>
            年龄：<input type="number" v-model.number="userinfo.age"> <!-- 控制是数字 不是文本了 一般都同时使用 -->
            <br></br>
            爱好：学习<input type="checkbox" v-model="userinfo.hobby" value="xx"> <!-- 收集的是checked -->
            打游戏<input type="checkbox" v-model="userinfo.hobby" value="dyx">
            吃饭<input type="checkbox" v-model="userinfo.hobby" value="cf"><br></br>
            所属校区
            <select v-model="userinfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenz">深圳</option>
                <option value="wuhan">武汉</option>
            </select><br></br>
            其他信息：<textarea v-model.lazy="userinfo.other"></textarea><br></br> <!-- 不是实时收集 失去焦点的时候才收集 -->
            <input type="checkbox" v-model="userinfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
            <!-- 不需要value值 -->
            <button @clcik="demo">提交</button>

        </form>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: "#root",
            data: {
                userinfo: {
                    account: '',
                    password: '',
                    age: 18,
                    sex: 'female',
                    hobby: [],
                    city: '',
                    other: '',
                    agree: ''
                }

            },
            methods:
            {
                demo() {
                    if (this.userinfo.agree == true) {
                        //console.log(JSON.stringify(this._data));
                        console.log(JSON.stringify(this.userinfo));
                    }
                    else{
                        alert('你没有同意')
                    }

                }
            }
        })
    </script>
</body>

</html>